<template>
  <!-- LocManage货位管理 -->
  <div style="position: relative">
    <el-card style="height: calc(100vh - 85px); overflow: auto">
      <!-- 信息搜索框 -->
      <LocManageForm :query-obj="queryObj" @queryClickfn="queryClick" @resetQueryfn="resetQuery" />

      <!-- 调整状态按钮 -->
      <el-row style="margin-bottom: 10px">
        <div style="float: left">
          <!-- <el-button v-permission="'main-task-create'" type="primary" plain @click="centerDialogVisible = true"><i class="el-icon-plus" /> 创建任务</el-button> -->
          <el-button v-permission="'LocManage-Lock'" plain type="primary" @click="Lockclick">
            <i class="iconfont el-icon-suoding" style="font-size: 14px" />
            锁定</el-button>
          <el-button v-permission="'LocManage-unLock'" plain type="primary" @click="unLockclick"><i class="iconfont el-icon-jiesuo" style="font-size: 14px" />
            取消锁定</el-button>
          <!-- v-permission="'LocManage-unLock'" -->
          <el-button plain type="primary" @click="setBasicshelf">设置为基准货位</el-button>
          <el-button plain type="primary" @click="cancelBasicshelf">取消基准货位</el-button>
          <el-button plain type="primary" @click="setRegion">设置区域</el-button>
        </div>
        <!-- 右侧公用按钮功能 -->
        <div style="float: right">
          <div style="font-size: 30px; display: inline-block; margin-right: 5px">
            <a href="#">
              <el-tooltip class="item" effect="dark" content="列位置" placement="top" style="cursor: pointer">
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <i class="el-icon-s-grid el-icon--right" style="font-size: 24px; color: black" />
                  </span>
                  <el-dropdown-menu slot="dropdown" style="width: 190px; height: 300px; overflow: auto">
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isrow">排</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isbay">列</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.islev">层</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.iswcsLocName">货位名</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isunitId">托盘号</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.islocStatus">货位状态</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isisLock">是否锁定</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.islocType">货位类型</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isaisle">巷道号</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isbasicShelf">基准货架</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.iszoneName">区域</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isremark">备注</el-checkbox></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-tooltip>
            </a>
          </div>
          <!-- 右侧公用按钮功能组件 -->
          <functionButton style="float:right" :refresh-click="refreshClick" :table-data="tableData" :table-data-all="tableDataAll" :headers-arr="headersArr" :headers-relations="headersRelations"
            @exportAllfn="exportAll" />
        </div>
      </el-row>
      <!-- 任务总表 -->
      <el-table v-if="tableData.taskId !== ''" ref="mainTable" v-loading="listLoading" :data="tableData" border :row-style="{ height: '40px' }" :cell-style="{ padding: '0px' }"
        style="width: 100%; margin-bottom: 10px; overflow: auto" @select="checkboxclick">
        <el-table-column width="40" type="selection" />
        <el-table-column label="操作" width="60" align="center">
          <template slot-scope="scope">
            <el-button v-permission="'LocManage-edit'" type="text" size="small" @click="updateWcsStatusclick(scope.row)">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="deleteCell.isrow" prop="row" label="排" width="60" align="center" />
        <el-table-column v-if="deleteCell.isbay" prop="bay" label="列" width="60" align="center" />
        <el-table-column v-if="deleteCell.islev" prop="lev" label="层" width="60" align="center" />
        <el-table-column v-if="deleteCell.iswcsLocName" prop="wcsLocName" label="货位名" width="100" align="center"/>
        <el-table-column v-if="deleteCell.isunitId" prop="unitId" label="托盘号" width="90" align="center"/>
        <el-table-column v-if="deleteCell.islocStatus" prop="locStatus" label="货位状态" width="80" align="center" />
        <el-table-column v-if="deleteCell.isisLock" prop="isLock" label="是否锁定" width="80">
          <template slot-scope="scope">
            {{ scope.row.isLock === 1 ? "已锁定" : "未锁定" }}
          </template>
        </el-table-column>
        <el-table-column v-if="deleteCell.islocType" prop="locType" label="货位类型" width="80" align="center" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.isaisle" prop="aisle" label="巷道号"  width="80" show-overflow-tooltip align="center"/>
        <el-table-column v-if="deleteCell.isbasicShelf" prop="basicShelf" label="基准货架"  width="80" align="center"  show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.basicShelf ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column v-if="deleteCell.iszoneName" prop="zoneName" label="MES区域" show-overflow-tooltip width="120" />
        <el-table-column v-if="deleteCell.iswcsZone" prop="wcsZone" label="WCS区域" show-overflow-tooltip width="120" />
        <el-table-column v-if="deleteCell.isremark" prop="remark" label="备注" show-overflow-tooltip />
      </el-table>
      <!-- 分页组件 -->
      <paging :pagion-obj="pagionObj" :handle-size-change="handleSizeChange" :handle-page-change="handlePageChange" />
    </el-card>

    <!-- 修改货位状态dialog -->
    <el-dialog :visible.sync="WcsStatusShow" title="请选择货位状态">
      <div>
        货位状态：<el-select v-model="wcsStatusData" style="margin-left: 10px">
          <el-option v-for="item in wcsStatusoption" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </div>
      <el-button type="primary" plain style="margin-top: 20px" @click="confirmWcsStatusclick">确认</el-button>
    </el-dialog>
    <!-- 选择区域的dialog -->
    <el-dialog :visible.sync="zoneDialog">
      区域：
      <el-select v-model="selectZoneName" placeholder="请选择">
        <el-option label="CJSTW100Z1" value="CJSTW100Z1"></el-option>
        <el-option label="CJSTW100Z2" value="CJSTW100Z2"></el-option>
        <el-option label="CJSTW100Z3" value="CJSTW100Z3"></el-option>
        <el-option label="CJSTW100Z4" value="CJSTW100Z4"></el-option>
        <el-option label="CJSTW100Z5" value="CJSTW100Z5"></el-option>
        <el-option label="CJSTW100Z6" value="CJSTW100Z6"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="zoneDialog = false">取 消</el-button>
        <el-button type="primary" @click="zoneDialogcomfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetWcsLocationApi,
  UpdateWcsLockRangeApi,
  UpdateWcsStatusApi,
  UpdateWcsLocationBasicShelfApi,
  UpdateWcsLocationZoneApi,
} from "@/api/LocInnerManageApi";
import { Message } from "element-ui";
import permission from "@/permission/index.js"; // 权限判断指令
import LocManageForm from "./components/LocManage-form.vue";
export default {
  name: "LocManage",
  directives: { permission },
  components: {
    LocManageForm,
  },
  data() {
    return {
      queryObj: {
        row: null, // 排
        bay: null, // 列
        lev: null, // 层
        wcsLocName: "", // wcs货位名
        unitId: "", // 托盘号
        locStatus: null, // 货位状态
        isLock: null, // 是否锁定
        locType: "", // 货位类型
        aisle: "", // 巷道号
        basicShelf: null, //基准货架
        zoneName: "", //MES区域
        wcsZone: "", //WCS区域
        remark: "", //备注
      },
      // 分页页码数据
      pagionObj: {
        size: 10,
        currentPage: 1,
        total: 100,
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      // 时间的数据
      timestart_end: [],
      isopen: false,
      // loding效果显示
      listLoading: true,
      // 列位置 数据
      deleteCell: {
        isrow: true,
        isbay: true,
        islev: true,
        iswcsLocName: true,
        isunitId: true,
        islocStatus: true,
        isisLock: true,
        islocType: true,
        isaisle: true,
        isbasicShelf: true,
        iszoneName: true,
        isremark: true,
        iswcsZone: true,
      },
      // 所有被选中的数据
      selectAll: [],
      // 当前被选中的数据
      selectNow: "",
      // 货位状态dialog显示
      WcsStatusShow: false,
      // 货位状态表
      wcsStatusoption: [
        { label: "Empty", value: 0 },
        { label: "Store", value: 1 },
        { label: "In", value: 2 },
        { label: "Out", value: 3 },
        { label: "StoreOne", value: 5 },
        { label: "StoreTwo", value: 6 },
      ],
      // 修改货位状态的参数
      wcsStatusData: "",
      // 修改货位状态的货位名
      WcsStatuswmsLocName: "",
      //区域dialog
      zoneDialog: false,
      //dialog里的selectZoneName
      selectZoneName: "",
      // excel 数据的key 表头数据
      headersArr: [
        "排",
        "列",
        "层",
        "货位名",
        "托盘号",
        "货位状态",
        "是否锁定",
        "货位类型",
        "巷道号",
        "基准货架",
        "MES区域",
        "WCS区域",
        "备注",
      ],
      // 将表头转换成中文
      headersRelations: {
        排: "row",
        列: "bay",
        层: "lev",
        货位名: "wcsLocName",
        托盘号: "unitId",
        货位状态: "locStatus",
        是否锁定: "isLock",
        货位类型: "locType",
        巷道号: "aisle",
        基准货架: "basicShelf",
        MES区域: "zoneName",
        WCS区域: "wcsZone",
        备注: "remark",
      },
    };
  },
  mounted() {
    this.queryData();
  },

  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.listLoading = true;
      this.queryObj.size = this.pagionObj.size;
      this.queryObj.page = this.pagionObj.currentPage;
      const res = await GetWcsLocationApi(this.queryObj);
      this.tableData = res.data.data;
      this.pagionObj.pageCount = res.data.pageCount;
      this.pagionObj.total = res.data.count;
      this.listLoading = false;
    },
    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1;
      this.queryData();
    },
    // 刷新按钮
    refreshClick() {
      this.listLoading = true;
      this.queryData();
      this.listLoading = false;
    },
    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val;
      this.queryData();
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val;
      this.queryData();
    },
    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen;
    },
    // 重置按钮
    resetQuery() {
      this.queryObj = {
        row: null, // 排
        bay: null, // 列
        lev: null, // 层
        wmsLocName: "", // wms货位名
        wcsLocName: "", // wcs货位名
        srmName: "", // 堆垛机名
        unitId: "", // 托盘号
        locStatus: null, // 货位状态
        isLock: null, // 是否锁定
        locType: "", // 货位类型
        aisle: "", // 巷道号
        depth: null, // 深度
      };
    },
    // 表格多选框被勾选时触发 参数一 所有被选中的数据 参数二当前勾选的数据
    checkboxclick(selection, row) {
      // console.log(selection, row)
      this.selectAll = selection;
      this.selectNow = row;
    },
    // 锁定
    Lockclick() {
      this.selectAll = this.$refs.mainTable.selection;
      console.log(this.selectAll, "selectAll");
      if (this.selectAll.length === 0) return Message.warning("请选择货位");
      const data = this.selectAll.map((item) => {
        return {
          wcsLocName: item.wcsLocName,
          isLock: 1,
          locStatus: item.locStatus,
          remark: item.remark,
        };
      });
      console.log(data, "data");
      this.$confirm(`确认锁定吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await UpdateWcsLockRangeApi(data);
          this.queryData();
          Message.success("操作成功");
        })
        .catch(() => {});
    },
    // 取消锁定
    unLockclick() {
      this.selectAll = this.$refs.mainTable.selection;
      console.log(this.selectAll, "selectAll");
      if (this.selectAll.length === 0) return Message.warning("请选择货位");
      const data = this.selectAll.map((item) => {
        return {
          wcsLocName: item.wcsLocName,
          isLock: 0,
          locStatus: item.locStatus,
          remark: item.remark,
        };
      });
      this.$confirm(`确认取消锁定吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await UpdateWcsLockRangeApi(data);
          this.queryData();
          Message.success("操作成功");
        })
        .catch(() => {});
    },
    // 设置为基准货位
    setBasicshelf() {
      this.selectAll = this.$refs.mainTable.selection;
      console.log(this.selectAll, "selectAll");
      const data = this.selectAll.map((item) => {
        return {
          wcsLocName: item.wcsLocName,
          basicShelf: true,
        };
      });
      this.$confirm(`确认锁定吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await UpdateWcsLocationBasicShelfApi(data);
        Message.success("设置成功");
        this.queryData();
      });
    },
    // 取消基准货位
    cancelBasicshelf() {
      this.selectAll = this.$refs.mainTable.selection;
      console.log(this.selectAll, "selectAll");
      const data = this.selectAll.map((item) => {
        return {
          wcsLocName: item.wcsLocName,
          basicShelf: false,
        };
      });
      this.$confirm(`确认锁定吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await UpdateWcsLocationBasicShelfApi(data);
        Message.success("设置成功");
        this.queryData();
      });
    },
    // 设置区域
    setRegion() {
      this.zoneDialog = true;
    },
    //设置区域的确认按钮
    async zoneDialogcomfirm() {
      this.selectAll = this.$refs.mainTable.selection;
      console.log(this.selectAll, "selectAll");
      // console.log(this.selectZoneName, "selectZoneName");
      const data = this.selectAll.map((item) => {
        return {
          wcsLocName: item.wcsLocName,
          zoneName: this.selectZoneName,
        };
      });
      this.$confirm(`确认锁定吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await UpdateWcsLocationZoneApi(data);
        Message.success("修改成功");
        this.queryData();
      });
    },
    // 修改货位状态
    updateWcsStatusclick(data) {
      this.WcsStatusShow = true;
      console.log(data.wmsLocName);
      this.WcsStatuswmsLocName = data.wmsLocName;
    },
    // 修改货位状态的确认按钮
    async confirmWcsStatusclick() {
      console.log({
        wmsLocName: this.WcsStatuswmsLocName,
        locStatus: this.wcsStatusData,
      });
      const res = await UpdateWcsStatusApi({
        wmsLocName: this.WcsStatuswmsLocName,
        locStatus: this.wcsStatusData,
      });
      console.log(res);
      this.queryData();
      Message.success("修改成功");
      this.WcsStatusShow = false;
    },
    // excel导出全部
    async exportAll() {
      const res2 = await GetWcsLocationApi({ size: 10000 });
      this.tableDataAll = res2.data.data;
    },
  },
};
</script>

<style lang="scss" scoped></style>
